<template>
    <SearchForm :FormValue="AS.searchForm" :FormConfig />
    <a-card>
        <a-row :gutter="20">
            <a-col :span="16">
                <a-row :gutter="20">
                    <a-col :span="8" v-for="(value, key) in countObj">
                        <a-card>
                            <a-statistic :title="key" :value style="text-align: center;" />
                        </a-card>
                    </a-col>
                    <a-col :span="12">
                        <div style="height:70vh">
                            <BarLineChart v-if="departmentObj.length" title="科室病区试管详细情况" :xData="departmentObj[0]"
                                :yData="departmentObj[1]" textColor="#000" />
                        </div>
                    </a-col>
                    <a-col :span="12">
                        <div style="height:70vh;display: flex;flex-direction: column;"
                            v-if="dateDepartment.length && LoginStore.user.userName === '管理员'">
                            <div style="height: 50%;width: 100%;">
                                <PieTable v-if="dateDepartment.length" title="科室近七天试管总数详细情况" :Data="dateDepartment"
                                    textColor="#000" />
                            </div>
                            <div style="height: 50%;width: 100%;">
                                <renderTable :Data="dateDepartment" />
                            </div>

                            <!-- <PieTable v-else-if="dateDepartment.length && LoginStore.user.userName === '管理员'"
                            title="科室近七天试管总数详细情况" :Data="dateDepartment" textColor="#000" /> -->
                        </div>
                        <div style="height:70vh" v-if="dateDepartment.length && LoginStore.user.userName !== '管理员'">
                            <LinePieChart title=" 科室近七天试管总数详细情况" :Data="dateDepartment" textColor="#000" />
                        </div>
                    </a-col>
                </a-row>
            </a-col>
            <a-col :span="8">
                <a-row style="height:100%">
                    <a-col :span="24" style="height:50%">
                        <PieCharts v-if="longTimeObj.length" title="试管取样超时率" :yData="longTimeObj" textColor="#000" />
                    </a-col>
                    <a-col :span="24" style="height:50%">
                        <a-carousel autoplay :dots="null" style="height:100%">
                            <PieCharts v-if="kindObj.length" title="类别检查详细情况" :yData="kindObj" textColor="#000" />
                            <PieCharts v-if="proObj.length" title="项目检查详细情况" :yData="proObj" textColor="#000"
                                LabelPosition="center" />
                            <PieCharts v-if="sexObj.length" title="男女病人试管比例详细情况" :yData="sexObj" textColor="#000" />
                        </a-carousel>
                    </a-col>
                </a-row>
            </a-col>
        </a-row>
    </a-card>
    <!-- <RenderCharts v-if="isRender" :Areas="templateObj.templateareas" :layout="templateObj.layout"
        :config="templateObj.config" /> -->
</template>
<script lang='ts' setup>

import { searchConfig, searchSelfConfig } from '@/config/Analysis';

import { createForm } from '@/utils/CreateForm';
import { useCommon } from '@/stores/Common';
import { useLogin } from '@/stores/Login';
import { useAnalysis } from '@/stores/Analysis';
import { provide, ref } from 'vue';
import { createBtns } from '@/utils/createPermissionBtns';
import RenderCharts from '@/components/RenderCharts.vue';

const CommonStore = useCommon()
const LoginStore = useLogin()
const AS = useAnalysis()
const { FormConfig } = new createForm(
    CommonStore.department != '检验科' ? searchSelfConfig : searchConfig,
    { labelAlign: 'left', layout: 'inline', labelCol: { span: 6 } }
)

const countObj = ref({})
const kindObj = ref<any>([])
const proObj = ref<any>([])
const sexObj = ref<any>([])
const departmentObj = ref<any>([])
const dateDepartment = ref<any>([])
const longTimeObj = ref<any>([])

const templateObj = ref<any>({})
const isRender = ref(false)
getData()
// setInterval(() => getData(), 15000)

function getData() {
    const { getCount, getKind, getGroup, getSex, getDepartment, getIllArea, getDateDepartment, getLongTime } = AS.getData()


    // console.log(getCount);

    // AS.getData().then((result: any[]) => {
    //     countObj.value = {
    //         '总数': result[0]['总数'],
    //         '已取样': result[0]['已取样'],
    //         '未取样': result[0]['未取样']
    //     }

    //     kindObj.value = handleDataType(result[1])
    //     proObj.value = handleDataType(result[2])
    //     sexObj.value = handleDataType(result[3])




    //     // console.log(result[4], result[5]);

    //     departmentObj.value = [
    //         [result[4][0], result[5][0]],
    //         result[4].slice(1).concat(result[5].slice(1))
    //     ]

    //     // console.log(departmentObj.value);
    //     // departmentObj.value = [
    //     //     [['心血管内科',], ['心血管内科3病区', '心血管内科4病区',]],
    //     //     // '肝胆外科3病区', '肝胆外科4病区' 
    //     //     [
    //     //         [85],   //总数
    //     //         [51],   //已取样
    //     //         [34],     //为取样
    //     //         [35, 50,],    //总数
    //     //         [6, 45,],    //已取样
    //     //         [29, 5,]    //为取样
    //     //     ]
    //     // ]

    //     // console.log(departmentObj.value);
    //     dateDepartment.value = result[6]
    // })

    getCount().then((result: any) => {
        countObj.value = {
            '总数': result['总数'],
            '已取样': result['已取样'],
            '未取样': result['未取样']
        }
    })
    getKind().then((result: any) => {
        kindObj.value = handleDataType(result)
    })
    getGroup().then((result: any) => {
        proObj.value = handleDataType(result)
    })
    getSex().then((result: any) => {

        console.log(handleDataType(result));

        sexObj.value = handleDataType(result)
    })
    getDepartment().then((result: any) => {
        return result
    }).then(res => {
        // console.log('-----------------------');
        getIllArea().then((result: any) => {
            // console.log(res);
            // console.log(result);


            console.log(result.slice(1).concat(result.slice(1)));

            if (AS.searchForm.departmentWardDevice.length > 1) {
                departmentObj.value = [
                    [res[0], result[0]],
                    result.slice(1).concat(result.slice(1))
                ]
            } else {
                departmentObj.value = [
                    [res[0], result[0]],
                    res.slice(1).concat(res.slice(1))
                ]
            }

        })
    })

    getDateDepartment().then((result: any) => {
        dateDepartment.value = result
    })

    getLongTime().then((result: any) => {
        longTimeObj.value = result
    })
}


function handleDataType(data: any[]) {
    let nameArr: string[] = [], result = []
    const [a, b] = data.slice(1)
    result.push(data[0])
    data[0].forEach((item: any) => { nameArr.push(item.name) });

    for (let i = 1; i < nameArr.length + 1; i++) {
        result[i] = []
        result[i].push({ name: '已取样', value: a[i - 1].value })
        result[i].push({ name: '未取样', value: b[i - 1].value })
    }
    return result
}

getTemplate()
function getTemplate() {
    AS.getTemplate(LoginStore.user.templateId).then(res => {
        isRender.value = true
        templateObj.value = res
    })
}



provide('permissionBtns', createBtns({
    query: () => getData(),
    href: () => {
        window.open(`http://192.168.31.15:8080?id=${LoginStore.user.departmentId}`)
    }
}))

</script>
<style lang='scss' scoped></style>